<template>
  <el-table class="sa-table" :data="log.data" height="520" v-loading="log.loading">
    <el-table-column prop="create_time" label="下单时间" min-width="172" align="center" />
    <el-table-column prop="order_sn" label="订单号" min-width="280" align="center" />
    <el-table-column prop="platform_text" label="订单来源" min-width="120" align="center" />
    <el-table-column prop="type_text" label="订单类型" min-width="100" align="center" />
    <el-table-column prop="order_amount" label="订单总金额" min-width="140" align="center" />
    <el-table-column prop="total_discount_fee" label="优惠减免" min-width="140" align="center" />
    <el-table-column prop="pay_fee" label="实付金额" min-width="140" align="center" />
    <el-table-column prop="status_text" label="订单状态" min-width="100" align="center" />
  </el-table>
  <sa-view-bar>
    <template #right>
      <sa-pagination :pageData="pageData" @updateFn="getData" />
    </template>
  </sa-view-bar>
</template>

<script setup>
  import { onMounted, reactive, watch } from 'vue';
  import { api } from '@/app/shop/admin/order/order.service.js';
  import { usePagination } from '@/sheep/hooks';

  const emit = defineEmits(['updateRefresh']);
  const props = defineProps(['id', 'refresh']);

  const log = reactive({
    data: [],
    loading: false,
  });

  const { pageData } = usePagination();

  async function getData() {
    log.loading = true;
    const { error, data } = await api.order.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      search: JSON.stringify({ user_id: [props.id] }),
    });
    if (error === 0) {
      log.data = data.orders.data;
      pageData.page = data.orders.current_page;
      pageData.list_rows = data.orders.per_page;
      pageData.total = data.orders.total;
    }
    log.loading = false;
    emit('updateRefresh', false);
  }

  function onChangeLogTabName() {
    pageData.page = 1;
    pageData.list_rows = 10;
    pageData.total = 0;
    getData();
  }

  watch(
    () => props.refresh,
    () => {
      if (props.refresh) {
        onChangeLogTabName();
      }
    },
  );

  onMounted(() => {
    onChangeLogTabName();
  });
</script>
